<template>
    <div class="vertical-style">
        <el-image src="https://dc-oss2.oss-ap-south-1.aliyuncs.com/BeeNation-02.jpg"
                  style="margin-top: 72px;margin-left: 300px;margin-right: 91px;width: 200px;justify-content: center"/>
        <div style="display: flex;flex-direction: row;margin-top: 40px;align-items: center;width: 100%">
            <p style="text-align: right;width: 25%;padding-right: 15px">{{$t('lang.loginAccount')}}</p>
            <Input v-model="account" size="large" :placeholder="$t('lang.loginAccountPlace')" style="width: 55%;"/>
        </div>
        <div style="display: flex;flex-direction: row;margin-top: 16px;align-items: center;width: 100%">
            <p style="text-align: right;width: 25%;padding-right: 15px">{{$t('lang.loginPwd')}}</p>
            <Input v-model="pwd" size="large" type="password" password :placeholder="$t('lang.loginPwdPlace')"
                   style="width: 55%;"
                   @on-enter="login"/>
        </div>
        <Button class="button-login" type="primary" size="large" @click="login">{{$t('lang.loginText')}}</Button>


        <Modal
                v-model="updateVisible"
                :title="$t('lang.updateTitle')"
                @on-cancel="updateCancel">
            <p style="color: #333333;font-size: 20px">{{updateVersion}}{{$t('lang.updateContent1')}}</p>
            <p>{{$t('lang.updateContent2')}}</p>
            <p>{{$t('lang.updateContent3')}}{{upgradeText}}</p>
            <div slot="footer" style="display: flex;flex-direction: row-reverse;justify-content: right">
                <Button type="primary" @click="updateOk">{{$t('lang.updateSureText')}}</Button>

                <div v-if="upgradeControl !== 2" style="margin-right: 15px">
                    <Button @click="updateCancel">{{$t('lang.updateCancelText')}}</Button>
                </div>
            </div>
        </Modal>
    </div>
</template>

<script>
    import {Message} from "element-ui";

    const {ipcRenderer} = window.require("electron");
    export default {
        name: "login",
        data() {
            return {
                account: "",
                pwd: "",
                upgradeControl: 0,//升级控制 0：无需升级；1：建议升级；2：强制升级
                updateVisible: false,
                updateVersion: '',
                upgradeText: '',
                fileName: '',
                downloadLink: '',
                langOptions: [{
                    value: 'zh',
                    label: '简体中文'
                }, {
                    value: 'es',
                    label: 'Español'
                }, {
                    value: 'en',
                    label: 'English'
                }],
                langLabel: '',
                langValue: '',
            }
        },
        methods: {
            langChangeClick(e) {
                this.langLabel = e.label
                this.langValue = e.value
                if (this.$i18n.locale !== this.langValue) {
                    this.$i18n.locale = this.langValue;//关键语句
                    localStorage.langValue = this.langValue
                    ipcRenderer.send("originalLanguage", {
                        title: this.$t('lang.promptText'),
                        content: this.$t('lang.confirmTheExit'),
                        button1: this.$t('lang.sureTxt'),
                        button2: this.$t('lang.cancelTxt'),
                    })
                }

            },
            getSetSeatConfig(code) {
                this.$api.getSetSeatConfigLogin({
                    systemLanguageCode: code
                }).then(() => {

                })
            },
            login() {
                if (this.account !== '' && this.pwd !== '') {
                    this.$api.getLogin({
                        account: this.account,
                        verifyCode: this.pwd,
                        autoLogin:true
                    }).then((res = {}) => {
                        console.log("====",res)
                        localStorage.code = res.data.accessToken;
                        localStorage.userName = res.data.userName;
                        localStorage.webUrl = res.data.webUrl;
                        ipcRenderer.send("showWhatsapp", res.data.webUrl);
                    }).catch(() => {
                        // catch 可以不要，如果想要捕获异常，就加上去
                    })
                } else {
                    Message.error(this.$t('lang.loginWarringMsg'));
                }

            },
            getVersionCheck() {
                this.$api.getVersionCheck().then(res => {
                    this.upgradeControl = res.upgradeControl
                    this.updateVersion = res.version
                    this.downloadLink = res.downloadLink
                    this.upgradeText = res.upgradeText
                    this.fileName = res.fileName
                    this.updateVisible = this.upgradeControl !== 0
                })
            },
            updateOk() {
                this.downloadByBlob(this.downloadLink, this.fileName)
            },
            updateCancel() {
                if (this.upgradeControl === 2) {
                    ipcRenderer.send("cancelUpdate")
                }
                this.updateVisible = false
            },
            downloadByBlob(data, name) {
                let blob = new Blob([data]);
                let url = window.URL.createObjectURL(blob);
                let aLink = document.createElement("a");
                aLink.style.display = "none";
                aLink.href = url;
                aLink.setAttribute("download", name);
                document.body.appendChild(aLink);
                aLink.click();
                document.body.removeChild(aLink); //下载完成移除元素
                window.URL.revokeObjectURL(url); //释放掉blob对象
            },
            download(href, name) {
                let eleLink = document.createElement('a')
                eleLink.download = name
                eleLink.href = href
                eleLink.click()
                eleLink.remove()
            },
        },
        mounted() {
            this.getVersionCheck()
            if (localStorage.langValue === undefined || localStorage.langValue === 'undefined') {
                localStorage.langValue = 'en'
            }
            this.langValue = localStorage.langValue

            if (this.$i18n.locale !== this.langValue) {
                this.$i18n.locale = this.langValue;
            }
            for (let i = 0; i < this.langOptions.length; i++) {
                if (this.langValue === this.langOptions[i].value) {
                    this.langLabel = this.langOptions[i].label
                    return
                }
            }
        }
    }
</script>

<style>
    .vertical-style {
        display: flex;
        flex-direction: column;
        background-color: white;
    }

    .button-login {
        width: 55%;
        margin-top: 40px;
        color: white;
        margin-left: 25%;
    }
</style>